
<template>
		<Form class="clearfix" ref="form" :model="formData" :label-width="100" :rules="rulevalid" >
            <Row>
			<Col span="12">
			<FormItem prop="contactName" label="收货人:">
				<Input  v-model="formData.contactName"/>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem prop="contactPhone" label="联系电话:">
				<Input  v-model="formData.contactPhone"/>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem prop="countrycode" label="国家:">
                <Select v-model="formData.countrycode" clearable>
                    <Option v-for="(item,index) in getCountryList" :key="index" :value="item.value">{{item.label}}</Option>
                </Select>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem prop="state" label="州:">
				<Input  v-model="formData.state"/>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem prop="city" label="城市:">
				<Input  v-model="formData.city"/>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem prop="zipcode" label="邮编:">
				<Input  v-model="formData.zipcode"/>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem prop="addressLine1" label="详细地址:">
				<Input  v-model="formData.addressLine1"/>
			</FormItem>
			</Col>
			<Col span="12">
			<FormItem label="备注:">
				<Input  v-model="formData.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
			</FormItem>
			</Col>
			<Col span="24" class="text-right">
				<Button type="primary" @click="submit">保存</Button>
				<Button class="margin-left-10" @click="close">返回</Button>
				<Spin size="large" fix v-if="loading"></Spin>
			</Col>
            </Row>
		</Form>
</template>

<script>
import { HttpSaveReceiver } from '@/service/api/views';
import {mapGetters,mapState} from 'vuex'

export default {
	data() {
		return {
			show: false,
			formData: {
				contactName: '',
				countrycode: '',
				state: '',
				zipcode: '',
				city: '',
				addressLine1: '',
				contactPhone: '',
				remark: '',
			},
			rulevalid: {},
		};
	},
	created() {
		this.validate();
	},
    computed:{
        ...mapGetters('dictionary', ['getCountryList']),
    },
	methods: {
		validate() {
			let rulevalid = this.rulevalid;
			Object.keys(this.formData).forEach(key => {
				rulevalid[key] = [
					{
						required: true,
						message: '该信息不能为空,请填写信息',
						trigger: 'blur',
					},
				];
			});
		},
		close() {
			this.$emit('on-close')
		},
		async submit() {
			let valid = await this.$refs['form'].validate();
			if (!valid) return;
			this.loading = true;
			HttpSaveReceiver(this.formData).then(res => {
				this.close();
				this.$emit('on-update');
				this.$Message.success(res.message);
			}, err => {
				this.$Message.error(err.message);
			}).finally(result => {
				this.loading = false;
			})
		},
	},
};
</script>

